<template>
  <div class="goods">
    <div class="goods_title">
      <span>{{ title }}</span>
    </div>
    <van-skeleton title avatar :row="3" :loading="loading" row-width="100">
      <div class="goods-box">
        <div
          class="goods_list"
          v-for="item in List"
          :key="item.goodsId"
          @click="goDetail(item)"
        >
          <div class="goods_img"><img :src="item.goodsCoverImg" alt="" /></div>
          <div class="goods_desc">{{ item.goodsName }}</div>
          <div class="price">￥{{ item.sellingPrice }}</div>
        </div>
      </div>
    </van-skeleton>
  </div>
</template>

<script>
import { computed } from "vue";
import { useRouter } from "vue-router";
export default {
  props: {
    List: Array,
    title: String,
  },
  // 判断拿到数据是否有，有就显示，无则骨架屏显
  setup(props) {
    const router = useRouter();
    const loading = computed(() => {
      return props.List.length > 0 ? false : true;
    });
    // console.log(props);

    const goDetail = (item) => {
      router.push({ path: "/detail", query: { id: item.goodsId } });
    };

    return {
      loading,
      goDetail,
    };
  },
};
</script>

<style lang="less" scoped>
.goods-box {
  display: flex;
  flex-wrap: wrap;
}
.goods .goods_title {
  background: #f9f9f9;
  color: #1baeae;
  font-size: 20px;
  line-height: 50px;
  height: 50px;
  text-align: center;
}
.goods_list {
  border-right: 1px solid rgb(213, 208, 208, 0.5);
  border-bottom: 1px solid rgb(213, 208, 208, 0.5);
  width: calc((100% - 1px) / 2);
  height: 220px;
  &:nth-child(2n) {
    border-right: none;
  }
}
.goods_img {
  padding-top: 10px;
  width: 120px;
  height: 120px;
  margin: 0 auto;
}
.goods_img img {
  width: 100%;
  height: 100%;
}
.goods_desc {
  text-align: center;
  padding: 10px;
  font-size: 15px;
}
.price {
  text-align: center;
  font-size: 15px;
}
</style>
